<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="前端最牛逼 .vant" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!-- 添加商品输入框 -->
    <van-cell-group>
      <van-field v-model="value" placeholder="请输入商品名称" />
    </van-cell-group>
    <!-- 添加商品按钮 -->
    <van-button type="info" size="large" @click="addGoods">添加商品</van-button>


    <!-- 底部跳转区域 -->




    <van-tabbar v-model="active">
      <van-tabbar-item class="iconfont icon-index-fill" to="/home">首页</van-tabbar-item>
      <van-tabbar-item class="iconfont icon-icon_zhanghao" to="/member">会员</van-tabbar-item>
      <van-tabbar-item icon="cart-o" info="0" to="/shopcar">购物车</van-tabbar-item>
      <van-tabbar-item icon="search" to="/search">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {

      active: 0,
      value: ''
     };

  },
  methods: {
    onClickLeft() {
      this.$router.push('/search')
      // history.back()
    },
    async addGoods() {
      // 如果输入框的内容长度为空 直接显示错误消息
      if (this.value.length === 0) {
        return this.$notify('请输入商品名称')
      }
      const { data: res } = await this.$http.post('/api/addproduct', {
        name: this.value
      })
      console.log(res)

      if (res.status !== 0) {
        return this.$notify('添加商品失败!')
      }

      // 跳转到搜索页面
      setTimeout(() => {
        this.$router.push('/search')
      }, 1000)

      this.$notify({ type: 'success', message: '添加商品成功' })
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #1989fa;
}
.van-nav-bar__title,
.van-nav-bar__text,
.van-nav-bar .van-icon {
  color: #fff;
  font-size: 14px;
}
.van-button {
  height: 40px;
  line-height: 40px;
  margin-top: 50px;
}
</style>




